<template>
  <a-drawer
      :title="title"
      :visible="visible"
      :width="$store.getters.isMobile ? '100%' : 1200"
      @close="closeDrawer"
  >
    <div v-if="sourceType == 'channel'" class="title">基本信息</div>
    <div v-if="sourceType == 'channel'" class="base-info">
      <div
          class="base-item"
          :class="$store.getters.isMobile ? 'mobile-width' : 'pc-width'"
      >
        联系人：{{ detailInfo.name }}
      </div>
      <div
          class="base-item"
          :class="$store.getters.isMobile ? 'mobile-width' : 'pc-width'"
      >
        电话：{{ detailInfo.phone }}
      </div>
      <div
          class="base-item"
          :class="$store.getters.isMobile ? 'mobile-width' : 'pc-width'"
      >
        区域：
        <span>{{ detailInfo?.address || "--" }}</span>
      </div>
      <div
          class="base-item"
          :class="$store.getters.isMobile ? 'mobile-width' : 'pc-width'"
      >
        通讯地址：{{ detailInfo.address || "--" }}
      </div>
      <div
          class="base-item"
          :class="$store.getters.isMobile ? 'mobile-width' : 'pc-width'"
      >
        渠道类型： {{ detailInfo?.source?.source || "--" }}
      </div>
      <div
          class="base-item"
          :class="$store.getters.isMobile ? 'mobile-width' : 'pc-width'"
      >
        关联项目：{{ detailInfo.village_name }}
      </div>
      <div
          class="base-item"
          :class="$store.getters.isMobile ? 'mobile-width' : 'pc-width'"
      >
        线索数量：{{ detailInfo?.static?.clueNum || "0" }}
      </div>
      <div
          class="base-item"
          :class="$store.getters.isMobile ? 'mobile-width' : 'pc-width'"
      >
        意向客户数量：{{ detailInfo?.static?.customerNum || "0" }}
      </div>
      <div
          class="base-item"
          :class="$store.getters.isMobile ? 'mobile-width' : 'pc-width'"
      >
        开户行：{{ detailInfo.bank || "--" }}
      </div>
      <div
          class="base-item"
          :class="$store.getters.isMobile ? 'mobile-width' : 'pc-width'"
      >
        开户账号：{{ detailInfo.bank_account || "--" }}
      </div>
    </div>
    <div v-if="sourceType == 'channel'" class="base-info">
      <div class="base-item">
        附件
        <a-space>
          <a-image v-for="item in detailInfo?.extra" :width="60" :src="item"/>
        </a-space>
      </div>
    </div>
    <div
        style="
        display: flex;
        justify-content: space-between;
        align-items: center;
        height: 40px;
        line-height: 40px;
        margin-top: 10px;
      "
    >
      <div class="title">成交合同</div>
      <div
          style="flex: 1; text-align: right; color: #2681f3"
          :class="$store.getters.isMobile ? 'font-12' : 'font-14'"
      >
        <span style="margin-right: 4px"> 总佣金：{{ totalAmount }}元 </span>
        <span style="margin-right: 4px"> 已结算：{{ settleAmount }}元 </span>
        <span style="margin-right: 4px"> 待结算：{{ waitAmount }}元</span>
      </div>
    </div>

    <a-table
        :pagination="pagination"
        bordered
        :columns="columns"
        :dataSource="tableData"
        @change="handleTableChange"
        :scroll="{
        x: 'max-content',
      }"
    >
      <template #bodyCell="{ column, record }">
        <!-- <template v-if="column.key === 'contract_tags'">
          <template v-if="record.contract_tags && record.contract_tags.length">
            <tag-list :list="record.contract_tags" :type="2" />
          </template>
          <span v-else>--</span>
        </template> -->

        <template v-if="column.key == 'lease_unit_price'">
          <span>{{
              record.lease_unit_price + record.lease_unit_price_unit
            }}</span>
        </template>
        <template v-if="column.key === 'contract_tags'">
          <template v-for="tag in record.contract_tags">
            <a-tag>{{ tag }}</a-tag>
          </template>
        </template>
      </template>
    </a-table>
  </a-drawer>
</template>

<script>
import {ref, toRefs, watch, reactive, computed} from "vue";
import request from "../../../../common/utils/request";
import TagList from "../../../../components/Tag/show.vue";

export default {
  props: {
    visible: {
      type: Boolean,
      default: false,
    },
    id: {
      type: [String, Number],
      default: 0,
    },
    uid: {
      type: [String, Number],
      default: 0,
    },
    sourceType: {
      type: String,
      default: "channel",
    },
  },
  components: {
    TagList,
  },
  setup(props, context) {
    const columns = [
      {title: "租客名称", key: "owner_name", dataIndex: "owner_name"},
      {title: "合同标签", key: "contract_tags"},
      {title: "开始日", key: "lease_starttime", dataIndex: "lease_starttime"},
      {title: "结束日", key: "lease_endtime", dataIndex: "lease_endtime"},
      {title: "租赁单价", key: "lease_unit_price"},
      {title: "签订日", key: "sign_time", dataIndex: "sign_time"},
      {title: "楼宇名称", key: "build_name", dataIndex: "build_name"},
      {
        title: "合同编码",
        key: "contract_number",
        dataIndex: "contract_number",
      },
      {
        title: "合同总金额",
        key: "contract_price",
        dataIndex: "contract_price",
      },
      {
        title: "预计所得佣金",
        key: "commission_price",
        dataIndex: "commission_price",
      },
    ];

    const state = reactive({
      settleAmount: 0,
      totalAmount: 0,
      waitAmount: 0,
      detailInfo: {},
    });

    const title = computed(() => {
      return props.sourceType == "channel" ? "渠道详情" : "合同明细";
    });

    const getDetailInfo = () => {
      const param = {
        id: props.id,
      };
      request
          .get("/org", "/business/customer/channel/get", param)
          .then((res) => {
            console.log(res.detail);

            state.detailInfo = res.detail;
            // console.log(detailInfo);
          });
    };

    const page = ref(1);
    const limit = ref(10);
    const total = ref(0);
    const pagination = computed(() => ({
      current: page.value,
      pageSize: limit.value,
      total: total.value,
      showSizeChanger: true,
    }));

    const tableData = ref([]);
    const getDealList = (init = false) => {
      if (init) {
        page.value = 1;
      }
      const param = {
        limit: limit.value,
        page: page.value,
      };
      if (props.sourceType == "user") {
        param.uid = props.uid;
      } else {
        param.id = props.id;
      }
      request.get("/org", "/business/channel/dealList", param).then((res) => {
        console.log(res);
        total.value = res.total;
        state.totalAmount = res.totalAmount;
        state.settleAmount = res.settleAmount;
        state.waitAmount = res.waitAmount;
        tableData.value = res.list;
      });
    };

    const init = () => {
      if (props.sourceType == "channel") {
        getDetailInfo();
      }
      getDealList(true);
    };

    const handleTableChange = (pager) => {
      page.value = pager.current;
      limit.value = pager.pageSize;
      getDealList();
    };

    watch(
        () => props.visible,
        (val) => {
          if (val) {
            init();
          }
        }
    );

    const closeDrawer = () => {
      context.emit("closeDrawer");
    };
    return {
      closeDrawer,
      columns,
      tableData,
      ...toRefs(state),
      pagination,
      page,
      limit,
      title,
      handleTableChange,
    };
  },
};
</script>

<style lang="less" scoped>
.title {
  height: 30px;
  line-height: 30px;
  color: #333;
  font-weight: 500;
  font-size: 15px;
  position: relative;
  padding-left: 10px;
}

.title::before {
  content: "";
  position: absolute;
  left: 0px;
  top: 8px;
  width: 4px;
  height: 14px;
  background-color: #1c90ff;
  border-radius: 4px;
}

.mobile-box {
  width: 100%;
}

.font-14 {
  font-size: 14px;
}

.font-12 {
  font-size: 11px;
}

.base-info {
  display: flex;
  border-bottom: 2px dotted #eee;
  padding: 10px;
  flex-wrap: wrap;

  .base-item {
    // flex: 1;
  }

  .mobile-width {
    width: 50%;
  }

  .pc-width {
    width: 20%;
  }
}
</style>
